<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'':sysName}}
			</el-col>
			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img src="../assets/headicon.png" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-if="!bingGoogle" @click.native="googlebing">{{$t('Login.bindingga')}}</el-dropdown-item>
						<el-dropdown-item @click.native="useruppwdbox=true">{{$t('Login.changepassword')}}</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">{{$t('Login.logout')}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单 $router.options.routes-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
					 unique-opened router v-if="!collapsed">
					<template v-for="(item,index) in menusRouter" v-if="!item.hidden">
						<el-submenu :index="index+''" :key="index" v-if="item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="(child,index) in item.children" :index="child.path" :key="index" v-show="child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<!-- <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item> -->
					</template>
				</el-menu>

				<!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-if="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in menusRouter" v-if="!item.hidden" class="el-submenu item">
						<template v-if="item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
								<li v-for="child in item.children" v-if="child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
							</ul>
						</template>
						<!-- <template v-else>
							<li class="el-submenu">
								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
							</li>
						</template> -->
					</li>
				</ul>
			</aside>
			<section class="content-container">
				<div>

			<el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab"  @tab-click="tabClick">
				<el-tab-pane
					v-for="item in editableTabs"
					:key="item.component"
					:label="item.name"
					:name="item.component"
					:closable='item.component!="/userstatistics"'>
				</el-tab-pane>
			</el-tabs>
	  		
				</div>

				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>

						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :index ='item.path' :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
						
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>

		<!-- 修改密码 -->
<div class="userUpdateMoney" v-if='useruppwdbox'>
      <div class="userUpdateForm">
        <h2>{{$t('Login.uppassword')}}</h2>
<el-form :model="uppassword" ref="uppassword" :rules="rules"   class="emo-dynamic">
  <el-form-item :label="$t('Login.originalpwd')" prop="pwd" label-width="80px">
    <el-input type="password"  v-model="uppassword.pwd" :placeholder="$t('Login.originalpassword')" ></el-input>
  </el-form-item>
  <el-form-item :label="$t('Login.pwd')" prop="newPwd" label-width="80px">
    <el-input type="password" v-model="uppassword.newPwd" :placeholder="$t('Login.password')"></el-input>
  </el-form-item>
  <el-form-item :label="$t('Login.confirmpwd')" prop="newPwdcope" label-width="80px">
    <el-input v-model="uppassword.newPwdcope" type="password" :placeholder="$t('Login.confirmpassword')"></el-input>
  </el-form-item>
  <el-form-item style="text-align:center">
    <el-button type="primary" @click="submitForm">{{$t('publicbtn.submitbtn')}}</el-button>
    <el-button @click="colsepwd">{{$t('publicbtn.cancel')}}</el-button>
  </el-form-item>
</el-form>
	  </div>
</div>
<!-- 谷歌认证 -->

		<div class="van-overlay" v-if="message">
          <div class="message-box">
            <div class="title">{{$t('bulletframe.title')}}</div>
            <p class="message-desc"> {{$t('bulletframe.shiyongguge')}}</p>
            <div class="close" @click="message = false">
              <img src="./../assets/cha.png" alt="" />
            </div>
            <div class="info-box">
             
              <div class="googleCode">
                <div id="qrcode" ref="qrCodeImg">
				</div>
                <p class="qrCode-desc"> {{goggleData.secret}} </p>
              </div>
              <div class="input-wrap">
                <div class="google">
                  <input
                    type="text"
                    :placeholder="$t('bulletframe.gugeInput')"
                    v-model="goggleData.code"
                  />
                </div>
                <button class="submit" @click="submitGoogle">
                  {{ $t("publicbtn.determine") }}
                </button>
              </div>
            </div>
          </div>
		  </div>
	</el-row>
</template>

<script>
import QRCode from 'qrcodejs2'
import { postUserRequest,postNudataRequest } from "@/api/api";


	export default {
		data() {
			return {
				bingGoogle:null,
				message:false,
				useruppwdbox:false,
				uppassword:{},
				sysName:'CUADMIN',
				collapsed:false,
				sysUserName: '',
				sysUserAvatar: '',
				menusRouter:[],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				
				tabIndex: 1,
				editableTabsValue: '/userstatistics',
				editableTabs:[
					{
					name:this.$t('router.userstatistics'),
					path:'/userstatistics',
					component:'/userstatistics',
					closable:true
					}
				],
				rules:{
        			pwd:{ required: true, message: this.$t('Login.originalpassword'), trigger: "change" },
					newPwd: [{required: true,pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,}$/,message:this.$t('newopenuser.least8digits'),trigger: "blur"}],
        			newPwdcope: [{required: true,pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,}$/,message:this.$t('newopenuser.least8digits'),trigger: "change"}],	
				},
				goggleData:{
					secret:null,
					code:null
				}
			}
		},
		watch:{
			'$route':function(to){
				let flag = true
				let toPath = to.path
				// 重复不添加
				for(let i=0;i<this.editableTabs.length;i++){
					if(this.editableTabs[i].component==toPath){
					flag = false
					break
					}
				}
				if(flag){
				this.editableTabs.push({
					name:to.name,
					path:to.path,
					component:to.fullPath,
				})
				}
			this.editableTabsValue=to.fullPath
			}
		},

		computed:{
	
	
		},
		methods: {
			googlebing(){
				this.getgoggledata()
				this.message=true
			},
			// goggle绑定
			getgoggledata(){
				postNudataRequest('/getGoogleCode').then(res=>{
				let data =res.data
				if(data.code==200){
					this.goggleData.secret= data.data.code;
					 new QRCode(this.$refs.qrCodeImg, {
							text: data.data.url, 
							width: 320,
            				height: 320,
							colorDark: '#000000',
							colorLight: '#ffffff',
							correctLevel: QRCode.CorrectLevel.H
						});
					}else{
					this.$message({
                	message: data.message,
                	type: "error",
                 });
				}

				})
			},

			// 谷歌认证
			submitGoogle(){
				if(this.goggleData.secret){
					postUserRequest(this.goggleData,'/bindGoogleAuth').then(res=>{
						const data = res.data
						if(data.code == 200){
							this.message=false
							this.$message({
								message: data.data,
								type: "success",
               				 });
							this.bingGoogle = true
							sessionStorage.setItem("bingGoogle", true);
						}else{
							this.$message({
								message: data.message,
								type: "error",
							});	
						}
					})
				}else{
				this.$message({
                message: this.$t('bulletframe.gugeInput'),
                type: "error",
              });	
				}

			},
			colsepwd(){
			this.useruppwdbox=false
			this.uppassword = {}
			},
			// 修改密码
			submitForm(){
		    this.$refs.uppassword.validate((valid) => {
          		if (valid) {
			 let newPwd=this.$md5(this.uppassword.newPwd)
			 let newPwdcope=this.$md5(this.uppassword.newPwdcope)
			if(newPwd===newPwdcope){
				let pwd = this.$md5(this.uppassword.pwd)
				let updatapwd = {
					pwd :pwd,
					newPwd :newPwd
				}
			postUserRequest(updatapwd,'/changePsw').then(res=>{
				var data = res.data;
				if (data.code == 200) {
					this.useruppwdbox=false
					this.$message({
						message: data.message,
						type: "success",
					});
				}else{
					this.$message({
                	message: data.message,
                	type: "error",
                 });
				}
			})
			}else{
			 this.$message({
                message: this.$t('bulletframe.pwdcopy'),
                type: "error",
              });
		}
          } else {
            return false;
          }
        });
			},
			
			removeTab(targetPath){
				let tabs = targetPath //删除的tab
				let activeTabs = this.editableTabsValue //当前的tab
 				let tabsList = this.editableTabs
				// 删除当前
				if(tabs == activeTabs){
					tabsList.forEach((tab,index)=>{
					if(tab.component==tabs){
					this.editableTabs =	this.arrMove(this.editableTabs,tab)	
					if(index>-1){
					let nextTab = this.editableTabs[index - 1] || this.editableTabs[index + 1];
					if(nextTab){
							this.$router.push({
							path: nextTab.component
						})	
					}
						}
					}
					})
				}else{
				// 删除不在当前
				tabsList.forEach((tab,index)=>{
					if(tab.component==tabs) {
					this.editableTabs =	this.arrMove(this.editableTabs,tab)
					}
					})
				}
			},
				arrMove(arr, key){
				for (var i=0; i<arr.length; i++){
					if (arr[i] == key){
						arr.splice(i,1)
					}
				}
				return arr;
			},

			// 跳转
			tabClick(openPath){
				this.$router.push({
					path: openPath.name
				})
			},

			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
				// console.log('handleopen');
			},
			handleclose() {
				// console.log('handleclose');
			},
			handleselect: function (a, b) {
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm( this.$t('bulletframe.signout'), this.$t('bulletframe.Tips'), {
					//type: 'warning'
				}).then(() => {
					sessionStorage.removeItem('boxToken');
					sessionStorage.removeItem('bospower');
					_this.$router.push('/login');

				}).catch(() => {
				});
			},
			//折叠导航栏
			collapse:function(){
				this.collapsed=!this.collapsed;
			},
			showMenu(i,status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			},
		getRouter(){
			let jurisdiction =this.jurisdictions['jurisdiction']
			let menusRoutersfrot=this.$router.options.routes
			let	menusRouters = JSON.parse(JSON.stringify(menusRoutersfrot))
			let diction = sessionStorage.getItem("bospower");
			for(let i =0;i<menusRouters.length;i++){
			if(menusRouters[i].pathName!='/404'){
				if(jurisdiction[diction].indexOf(menusRouters[i].pathName)>=0){
					menusRouters[i].leaf = true;
				}
				if(menusRouters[i]['children']){
					for(let j = 0;j<menusRouters[i]['children'].length;j++){
						if(jurisdiction[diction].indexOf(menusRouters[i]['children'][j].path)>=0){
						 menusRouters[i]['children'][j].hidden = true;
						
						}
					}
				}
			}
		 }
			this.menusRouter = menusRouters
			}
		},
		mounted() {    
			this.bingGoogle = sessionStorage.getItem('bingGoogle') || false
		//  this.$i18n.locale = sessionStorage.getItem("boslanguage")||'zh-TW';
		    console.log(this.$i18n.locale)
			this.getRouter()
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.name || '';
				this.sysUserAvatar = user.avatar || '';
			};
						
			
		},
		updated(){

		},
		created(){
		

			// 刷新在当前路由添加
				let to =this.$route
				let flag = true
				let toPath = to.path
				for(let i=0;i<this.editableTabs.length;i++){
					if(this.editableTabs[i].component==toPath){
					flag = false
					break
					}
				}
				if(flag){
				this.editableTabs.push({
					name:to.name,
					path:to.path,
					component:to.fullPath,
				})
				}
			this.editableTabsValue=to.fullPath
	
		}
	}

</script>




<style scoped lang="scss">

	.content-container /deep/ .is-closable:nth-child(1) .el-icon-close{
display: none!important;

}
	@import '~scss_vars';
	
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: $color-primary;
			color:#fff;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height:60px;
				font-size: 22px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:230px;
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0px 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex:0 0 230px;
				width: 230px;
				height: 100%;
				overflow: auto;

				
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu{
					height: 100%;
				}
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}

			aside::-webkit-scrollbar {
					width: 5px;
					height: 1px;
				}
				aside::-webkit-scrollbar-track-piece {
				background-color: rgba(0, 0, 0, 0.1);
				-webkit-border-radius: 6px;
				}
				aside::-webkit-scrollbar-thumb:vertical {
				height: 5px;
				background-color: rgba(125, 125, 125, 0.3);
				-webkit-border-radius: 6px;
				}
				aside::-webkit-scrollbar-thumb:horizontal {
				width: 5px;
				background-color: rgba(125, 125, 125, 0.3);
				-webkit-border-radius: 6px;
				}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 230px;
			}
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}

		.el-menu-vertical-demo{
			// width: 230px!important;
		}
	}


 .userUpdateMoney {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 9;
}
.userUpdateForm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  padding: 30px;
  background: #fff;
  box-shadow: 0px 0px 3px #888;
}
.userUpdateMoney h2 {
  text-align: center;
  font-size: 18px;
}
.van-overlay{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
	z-index: 4;
}



.message-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 820px;
  height: 559px;
  background: #ffffff;
  border-radius: 4px;
  padding: 24px 40px;
  box-sizing: border-box;
  .title {
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #171e26;
    line-height: 33px;
    margin-bottom: 40px;
  }
  .message-desc {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #171e26;
    line-height: 22px;
    margin-bottom: 40px;
  }
  .close {
    position: absolute;
    top: 24px;
    right: 26px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info-box {
    display: flex;
    .googleCode {
      width: 320px;
      height: 320px;
      margin-right: 40px;
      img {
        width: 100%;
        height: 100%;
      }
      .qrCode-desc {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #171e26;
        line-height: 20px;
        margin-top: 20px;
        text-align: center;
      }
    }
    .input-wrap {
      .verify {
        display: flex;
        justify-content: space-between;
        width: 380px;
        height: 60px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e4e4e4;
        padding-right: 24px;
        input {
          height: 100%;
          padding-left: 24px;
          font-size: 14px;
          border: none;
        }
        button {
          display: block;
          border: none;
          height: 20px;
          color: #148beeff;
          background-color: #fff;
          font-size: 14px;
          margin-top: 20px;
          cursor: pointer;
        }
      }
      .google {
        width: 380px;
        height: 60px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e4e4e4;
        margin-top: 20px;
        input {
		  width: calc(100% - 48px);
          height: 100%;
          padding:0 24px;
          font-size: 14px;
          border: none;
        }
      }
      .submit {
        width: 380px;
        height: 60px;
        background: #148bee;
        border-radius: 4px;
        border: none;
        color: #fff;
        margin-top: 100px;
        cursor: pointer;
      }
    }
  }
}
</style>


